<style scoped lang="less">
  @import "KanJiaOrderList";
</style>
<script>

  import {getOrderList} from '@/api/kanjia';
  import Vue from 'vue';
  import {List, Tab, Tabs} from 'vant';

  Vue.use(List).use(Tab).use(Tabs);
  export default {
    name: 'order-list',
    data() {
      return {
        type: null,
        order_id: null,
        active: 0,
        orderTypes: [{index: 0, type: 0, title: '全部', list: [], finished: false, loading: false},
          {index: 1, type: 1, title: '进行中', list: [], finished: false, loading: false},
          {index: 2, type: 2, title: '已完成', list: [], finished: false, loading: false},
          {index: 3, type: 3, title: '已关闭', list: [], finished: false, loading: false}]
      };
    },
    created() {
      // this.type = this.$route.params.type;
      // if (this.type !== null && this.type !== undefined) {
      //   this.active = this.type;
      // }
    },
    methods: {
      onLoad(index) {
        if (this.orderTypes[index].finished) {
          return;
        }
        this.getOrders();
      },
      /**
       * 订单状态
       * @param status 交易状态
       * @param is_lowest 是否到底价
       */
      getOrderStatusStr(status,is_lowest) {
        let statusStr = '';
        if(status===this.GLOBAL.KJ_ORDER_STATUS_NORMAL){
          if(is_lowest===this.GLOBAL.KJ_ORDER_IS_LOWEST_NO){
            statusStr='进行中';
          }else {
            statusStr='到底价';
          }
        }else {
          statusStr = '已关闭';
        }
        return statusStr;
      },
      toDetail(id){
        this.$router.push({name: 'kj-order-detail', params: {order_id: id}});
      },

      getOrders() {
        let vm = this;
        if (vm.orderTypes[vm.active].finished) {
          return;
        }
        let page = vm.orderTypes[vm.active].list.length / 20 + 1;
        getOrderList({page: page, size: 20, type: vm.orderTypes[vm.active].type}).then(rep => {
          vm.orderTypes[vm.active].list = vm.orderTypes[vm.active].list.concat(rep.data.data.list);
          if (vm.orderTypes[vm.active].list.length === rep.data.data.count) {
            vm.orderTypes[vm.active].finished = true;
          }
          vm.orderTypes[vm.active].loading = false;
        });
      }
    }
  }
</script>
<template>
  <div>
    <van-tabs v-if="orderTypes!==null" v-model="active" sticky animated swipeable
              title-active-color="#EC414D"
              :swipe-threshold="5" lazy-render>
      <template v-for="(orderTypeItem,index) in orderTypes">
        <van-tab :title="orderTypeItem.title" :name="orderTypeItem.index" :key="index">
          <van-list
            v-model="orderTypeItem.loading"
            :finished="orderTypeItem.finished"
            finished-text="没有更多了"
            @load="onLoad(index)">
            <div @click="toDetail(item.id)" class="order-item" v-for="item in orderTypeItem.list"
                 :key="index+item.id">
              <div class="order-top">
              <span class="order-create-time">
                {{item.create_time}}
              </span>
                <span class="status">{{getOrderStatusStr(item.status,item.is_lowest)}}</span>
              </div>
              <div class="order-goods-info">
                <img alt="商品图" class="order-goods-img"
                     :src="GLOBAL.getUrl(item.goods_img,false,true)">
                <div class="order-goods-info-content">
                  <div class="order-goods-info-title">
                    {{item.goods_title}}
                  </div>
                  <div class="order-item-price-wrap">
                    <span class="order-item-price"><span class="symbol">￥</span>{{GLOBAL.formatPrice(item.original_price)}}</span>
                  </div>
                </div>
              </div>
              <div class="order-item-amount-wrap">
                  <span class="order-id">

                  </span>
                <span class="order-item-amount">
                    已砍至
                    <span class="symbol">￥</span>
                    <span class="order-amout">{{GLOBAL.formatPrice(item.order_item_id!=null?item.orderItem.goods_amount:item.current_price)}}</span>
                  </span>
              </div>
            </div>
          </van-list>
        </van-tab>
      </template>
    </van-tabs>

  </div>
</template>
